<!--
 * @Description: icon 图标
 * @Author: zhangwei
 * @Date: 2023-02-06 15:54:07
 * @LastEditTime: 2023-02-18 18:25:04
 * @LastEditors: zw 775925302@qq.com
 1. 名称已el-开头的，表示是自定义icon的，
 2. 否则表示是系统自带的
-->
<template>
  <i
    :class="[icon, 'element-icons']"
    :style="{ fontSize: size, color: color }"
    v-if="icon?.indexOf('el-') !== -1"
  ></i>
  <svg aria-hidden="true" :width="size" v-else-if="icon?.indexOf('cmp-') !== -1">
    <use :xlink:href="symbolId" fill="color" />
  </svg>
  <el-icon v-else :size="size" :color="color">
    <component :is="icon"></component>
  </el-icon>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "DIcon",
  props: {
    icon: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "14px",
    },
    color: {
      type: String,
      default: "#ffffff",
    },
  },

  setup(props) {
    const symbolId = computed(() => `#icon-${props.icon}`);
    return {
      symbolId,
    };
  },
});
</script>
